<template>
  <el-select
    :model-value="localValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    class="customer-source-selector"
    style="width: 100%"
    @update:model-value="handleChange"
  >
    <el-option
      v-for="item in customerSources"
      :key="item.id"
      :label="item.title || item.name"
      :value="item.id"
    ></el-option>
  </el-select>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { customerApi } from '@/api/customer'
  import type { ApiResponse } from '@/types/api'

  interface Props {
    modelValue: string | number | null
    placeholder?: string
    disabled?: boolean
    clearable?: boolean
    options?: Array<{ id: string | number; title?: string; name?: string }> // 支持两种格式
  }

  interface Emits {
    (e: 'update:modelValue', value: string | number | null): void
    (e: 'change', value: string | number | null): void
  }

  const props = withDefaults(defineProps<Props>(), {
    placeholder: '请选择客户来源',
    disabled: false,
    clearable: true,
    options: () => [],
  })

  const emit = defineEmits<Emits>()

  const customerSources = ref<any[]>([])

  // 创建本地响应式变量存储选中的值
  const localValue = ref(props.modelValue)

  // 监听外部modelValue变化，更新本地值
  watch(
    () => props.modelValue,
    newValue => {
      localValue.value = newValue
    }
  )

  // 监听外部传入的options变化
  watch(
    () => props.options,
    newOptions => {
      if (newOptions && newOptions.length > 0) {
        console.log('从父组件接收客户来源选项数据:', newOptions)
        customerSources.value = newOptions
      }
    },
    { immediate: true }
  )

  // 处理值变化
  const handleChange = (value: string | number | null) => {
    emit('update:modelValue', value)
    emit('change', value)
  }

  // 获取客户来源
  const getCustomerSources = async () => {
    // 如果已经有从父组件传入的选项数据，则不再调用API
    if (props.options && props.options.length > 0) {
      console.log('已有从父组件传入的客户来源数据，跳过API调用')
      return
    }

    try {
      // 使用customerApi中的方法来获取客户来源，确保使用相同的请求配置
      console.log('开始请求客户来源数据...')
      const response: ApiResponse<any[]> = await customerApi.getSourceOptions()
      console.log('客户来源数据响应:', response)

      if (response.code === 0 && Array.isArray(response.data)) {
        customerSources.value = response.data
        console.log('客户来源数据设置成功:', customerSources.value)
      } else {
        console.error('获取客户来源失败:', response.msg || '未知错误')
        customerSources.value = []
        // 当API返回错误或空数据时，使用静态数据作为备用
        useStaticData()
      }
    } catch (error) {
      // 只处理非取消请求的错误
      if (error && (error as any).code !== 'ERR_CANCELED') {
        console.error('获取客户来源请求异常:', error)
        // 当请求异常时，使用静态数据作为备用
        useStaticData()
      }
    }
  }

  // 使用静态数据作为备用
  const useStaticData = () => {
    console.log('使用客户来源静态数据')
    customerSources.value = [
      { id: '1', title: '网站' },
      { id: '2', title: '电话' },
      { id: '3', title: '展会' },
      { id: '4', title: '转介绍' },
      { id: '5', title: '广告' },
      { id: '6', title: '社交媒体' },
      { id: '7', title: '搜索引擎' },
      { id: '8', title: '其他渠道' },
    ]
  }

  // 初始化数据
  onMounted(() => {
    console.log('CustomerSourceSelector组件挂载，开始获取数据')
    // 如果父组件没有传入选项数据，则自己获取
    if (!props.options || props.options.length === 0) {
      getCustomerSources()
    }
  })
</script>

<style scoped>
  /* 可以添加自定义样式 */
</style>
